<template>
  <div style="display:flex;justify-content:space-between;background:#515a6e">
    <div class="logo">KGC就业信息管理平台</div>
    <Menu mode="horizontal" theme="dark" active-name="1">
      <MenuItem name="1">
        <Icon type="ios-paper"/>快捷入口
      </MenuItem>
      <MenuItem name="1">
        <Badge dot :offset="[18,-8]">消息</Badge>
      </MenuItem>
      <Submenu name="3">
        <template slot="title">
          <Icon type="ios-contact"/>
          {{getNickName}}
        </template>
        <MenuItem name="3-4">修改密码</MenuItem>
        <MenuItem name="3-5" @click.native="logOut">退出</MenuItem>
      </Submenu>
    </Menu>
  </div>
</template>
<style >
.logo {
  text-indent: 10px;
  height: 60px;
  color: #ffffff;
  width: 240px;
  line-height: 60px;
  cursor: pointer;
  user-select: none;
  font-size: 22px;
}
</style>
<script>
import { mapGetters, mapMutations } from "vuex";
import { storage } from "@/lib";
export default {
  computed: mapGetters("user", ["getNickName"]),
  mounted() {},
  methods: {
    ...mapMutations(["logout"]),
    logOut() {
      this.$Modal.confirm({
        title: "系统提示",
        content: "<p>确认退出？</p>",
        onOk: () => {
          this.logout();
          this.$router.push("/login");
        }
      });
    }
  }
};
</script>